import React, { useState, useEffect, useCallback } from 'react'
import Echarts from '&/baseUI/EChartsUI'
import { Card } from 'antd'
import dayjs from 'dayjs'
import _ from 'lodash'
import { color, color1, color2 } from '../colors'

const EchartsData = ({ data }) => {
  const [option, setOption] = useState(null)
  const [option1, setOption1] = useState(null)
  const [option2, setOption2] = useState(null)
  const [option3, setOption3] = useState(null)
  useEffect(() => {
    if (!data) return
    const xData = data?.time_list?.map((item) => {
      return dayjs(item).format('MM-DD HH:mm')
    })
    if (data.pollution_control_list.length) {
      const legendData = data?.pollution_control_list?.map((i) => i.dev_name)
      const pollution_control_list = data?.pollution_control_list?.map(
        (item) => {
          return {
            type: 'line',
            smooth: true,
            name: item.dev_name,
            data: item.values.map((i) => {
              return i < 0 ? '--' : i
            })
          }
        }
      )
      const option = {
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: '#fff'
            }
          }
        },
        color: color1,
        toolbox: {
          show: true,
          right: '0px',
          top: '15px',
          feature: {
            // 下载保存为图片
            saveAsImage: {
              show: true,
              // icon: `image://${echartsDown}`, // 内部相对路径
              // connectedBackgroundColor: '#fff',
              title: '保存图片',
              type: 'png',
              pixelRatio: 1
            }
          }
        },
        grid: {
          bottom: '7%'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: pollution_control_list
      }
      setOption(option)
    }
    if (data.production_list.length) {
      const legendData = data?.production_list?.map((i) => i.dev_name)
      const production_list = data?.production_list?.map((item) => {
        return {
          type: 'line',
          smooth: true,
          name: item.dev_name,
          data: item.values.map((i) => {
            return i < 0 ? '--' : i
          })
        }
      })
      const option1 = {
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: '#fff'
            }
          }
        },
        color: color,
        toolbox: {
          show: true,
          right: '0px',
          top: '15px',
          feature: {
            // 下载保存为图片
            saveAsImage: {
              show: true,
              // icon: `image://${echartsDown}`, // 内部相对路径
              // connectedBackgroundColor: '#fff',
              title: '保存图片',
              type: 'png',
              pixelRatio: 1
            }
          }
        },
        grid: {
          bottom: '7%'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: production_list
      }
      setOption1(option1)
    }
    if (data.indirect_list.length) {
      const legendData = data?.indirect_list?.map((i) => i.dev_name)
      const indirect_list = data?.indirect_list?.map((item) => {
        return {
          type: 'line',
          smooth: true,
          name: item.dev_name,
          data: item.values.map((i) => {
            return i < 0 ? '--' : i
          })
        }
      })
      const option = {
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: '#fff'
            }
          }
        },
        // color: color,
        toolbox: {
          show: true,
          right: '0px',
          top: '15px',
          feature: {
            // 下载保存为图片
            saveAsImage: {
              show: true,
              // icon: `image://${echartsDown}`, // 内部相对路径
              // connectedBackgroundColor: '#fff',
              title: '保存图片',
              type: 'png',
              pixelRatio: 1
            }
          }
        },
        grid: {
          bottom: '7%'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: indirect_list
      }
      setOption2(option)
    }
    if (data.summation_list.length) {
      const legendData = data?.summation_list?.map((i) => i.dev_name)
      const summation_list = data?.summation_list?.map((item) => {
        return {
          type: 'line',
          smooth: true,
          name: item.dev_name,
          data: item.values.map((i) => {
            return i < 0 ? '--' : i
          })
        }
      })
      const option = {
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: '#fff'
            }
          }
        },
        color: color2,
        toolbox: {
          show: true,
          right: '0px',
          top: '15px',
          feature: {
            // 下载保存为图片
            saveAsImage: {
              show: true,
              // icon: `image://${echartsDown}`, // 内部相对路径
              // connectedBackgroundColor: '#fff',
              title: '保存图片',
              type: 'png',
              pixelRatio: 1
            }
          }
        },
        grid: {
          bottom: '7%'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: summation_list
      }
      setOption3(option)
    }
  }, [data])

  return (
    <div className="EchartsData_modal">
      {option ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="治污设施"
        >
          <Echarts option={option} />
        </Card>
      ) : null}
      {option1 ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="产污设施"
        >
          <Echarts option={option1} />
        </Card>
      ) : null}
      {option2 ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="产治一体"
        >
          <Echarts option={option2} />
        </Card>
      ) : null}
        {option3 ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="企业总电"
        >
          <Echarts option={option3} />
        </Card>
      ) : null}
      {/* {option == null && option1 == null && <div>暂无数据</div>} */}
    </div>
  )
}
export default EchartsData
